<template>
  <div class="msg main_block">
    <el-menu default-active="/msg" mode="horizontal" :router="true">
      <el-menu-item index="/msg">消息</el-menu-item>
      <el-menu-item index="/work">待办</el-menu-item>
    </el-menu>
    <ul class="table">
      <li v-for="(msg, index) in msgs" :key="index" @click="goTaskDetail(msg)">
        <div class="msg_title">
          <span class="read" :class="{unread: msg.msgStatus == 2}"></span>
          {{msg.msg}}
        </div>
        <div class="time">{{msg.createTime}}</div>
      </li>
      <li v-if="!msgs.length">暂无数据</li>
    </ul>
    <div class="pagination">
      <el-pagination
        background
        layout="prev, pager, next"
        :current-page="current"
        :page-size="size"
        :total="total"
        @current-change="pageChange"
      ></el-pagination>
    </div>
  </div>
</template>
<script>
import httpSer from "@/http";
export default {
  data() {
    return {
      msgs: [],
      size: 14,
      total: 0,
      current: 1
    };
  },
  created() {
    
  },
  mounted() {
    this.getMsgs();
  },
  methods: {
    getMsgs() {
      let url = "/msgInfo/pageMsgInfo";
      let data = {
        size: this.size,
        current: this.current
      };
      httpSer.post(url, data).then(res => {
        let msgs = res.records;
        this.msgs = msgs;
        this.total = res.total * 1;
        this.current = res.current * 1;
      });
    },
    pageChange(current) {
      this.current = current * 1;
      this.getMsg();
    },
    goTaskDetail(item) {
      let url = "/msgInfo/readMsg";
      let data = {
        id: item.id
      };
      httpSer.post(url, data).then(res => {
        this.$router.push({
          path: "/task/taskDetail",
          query: {
            id: item.bizId
          }
        });
        this.$store.dispatch("getTotalMsg");
      });
    }
  },
  filters: {},
  components: {}
};
</script>

<style lang="less" scope>
@import "./index.less";
</style>